<!--
 * @Author: chunlai
 * @Date: 2025-02-20 10:45:07
 * @LastEditTime: 2025-08-12 17:44:42
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\index\components\RecordWarnTip.vue
 * @Description: 投保记录警告提示
-->
<template>
  <div>
    <van-popup
      v-model="show"
      position="bottom"
      overlay-class="lay1_shark"
      round
    >
      <div class="modal-content">
        <div class="modal-header">
          <span>您即将进入投保流程</span>
          <span class="ms-row2-icon size18" @click.stop="$emit('close')"></span>
        </div>
        <div class="modal-body">
          <div class="modal-body-conts">
            <p>尊敬的客户：</p>
            <p class="ti_2">
              您即将进入投保流程，请仔细阅读保险条款。本保险产品由【
              <strong style="color: #000000">{{ gysFullName }}</strong>
              】承保，本产品的销售机构为民盛保险代理有限公司，相关保单服务将由民盛保险代理有限公司提供。
            </p>
            <p class="ti_2">
              投保前请您阅读<span class="notice-link" @click.stop="htmlPop"
                >《客户告知书》</span
              >
            </p>
          </div>
          <div class="modal-body-confirm">
            <p class="tips">
              点击“已阅读并同意”，您在销售页面的操作将被依法记录和保存。
            </p>
            <div class="confirm-btn" @click.stop="$emit('sure')">
              已阅读并同意
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="showHtml"
      position="bottom"
      overlay-class="lay1_shark "
      :style="{ height: '90%' }"
      round
      :close-on-click-overlay="false"
      @click-overlay="closePop"
      @click-close-icon="closePop"
    >
      <div class="insure_prenotice_box">
        <div class="pop-title">客户告知书</div>
        <div class="pop-main">
          <div class="html_box" v-html="htmlConts"></div>
        </div>
        <div class="safe_area html-foot" @click="closePop">
          <div class="foot-btn">我已阅读并知悉</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "RecordWarnTip",
  components: {},
  data() {
    return {
      show: false,
      showHtml: false,
      htmlConts: "",
    };
  },
  computed: {
    ...mapGetters({
      gysFullName: "dictionary/gysFullName",
      gysIntroHtml: "dictionary/gysIntroHtml",
      homeMustReadList: "page/homeMustReadList",
    }),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    initModule() {
      this.show = true;
    },
    htmlPop() {
      const htmlItem = this.homeMustReadList.find(
        (e) => e.titleName === "客户告知书"
      );
      if (htmlItem && htmlItem.content) {
        this.htmlConts = htmlItem.content;
        this.showHtml = true;
      }
    },
    closePop() {
      this.showHtml = false;
    },
  },
};
</script>
<style lang="less" scoped>
.modal-content {
  width: 100%;
  height: 360px;
  background-color: #ffffff;
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    color: #2c2d30;
    font-size: 16px;
    padding: 0 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  .modal-body {
    color: #6b7179;
    padding: 20px 15px;
    &-conts {
      line-height: 1.5;
      .notice-link {
        padding: 0 4px;
        color: #00a8f7;
      }
    }
    &-confirm {
      margin-top: 20px;
      padding-bottom: 10px;
      .tips {
        color: #f8ad00;
        line-height: 1.5;
        font-weight: 600;
        margin-bottom: 30px;
      }
      .confirm-btn {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        color: #ffffff;
        border-radius: 40px;
        background-color: #0d6eff;
      }
    }
  }
}
.insure_prenotice_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #f5f5f9;
  .pop-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
    color: #2c2d30;
    text-align: center;
    background-color: #ffffff;
  }

  .pop-main {
    width: 100%;
    height: calc(100% - 110px);
    padding: 10px 12px;

    .html_box {
      height: 100%;
      border-radius: 10px;
      padding: 15px 16px;
      line-height: 18.56px;
      background-color: #fff;
      overflow-y: auto;
      font-size: 14px;
      font-weight: 400;
      color: rgba(87, 87, 87, 1);
    }
  }
  .html-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    padding: 0 12px;
    background-color: #ffffff;
    .foot-btn {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #ffffff;
      border-radius: 40px;
      background-color: #0d6eff;
    }
  }
}
</style>
